<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="确认订单"
        left-arrow
        @click-left="$router.back()"
      >
      </van-nav-bar>
    </header>
    <div class="content">
      <van-cell @click="selectAdddress" v-if="flag" :title="`${name} ${tel}`" is-link :label="showDetailAddress" />
      <van-cell @click="selectAdddress" v-else title="请添加地址" is-link />
      <van-card
        v-for="item of orderList"
        :key="item.proid"
        :num="item.num"
        :price="item.originprice"
        :title="item.proname"
        :thumb="item.img1"
      />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Card, Cell } from 'vant'
import { confirmOrder } from '@/api/order'
import { getStorage } from '../../utils/storage'
Vue.use(NavBar)
Vue.use(Card)
Vue.use(Cell)
export default {
  data () {
    return {
      orderList: [],
      flag: false,
      name: '',
      tel: '',
      province: '',
      city: '',
      county: '',
      addressDetail: ''
    }
  },
  computed: {
    showDetailAddress () {
      return this.province === this.city
        ? this.province + this.county + this.addressDetail
        : this.province + this.city + this.county + this.addressDetail
    }
  },
  methods: {
    selectAdddress () {
      this.$router.push('/orderaddresslist/' + this.$route.params.time)
    }
  },
  mounted () {
    confirmOrder({
      time: this.$route.params.time,
      userid: getStorage('userid')
    }).then(res => {
      console.log(res.data)
      this.orderList = res.data.data
      this.flag = res.data.flag
      this.name = res.data.data[0].name
      this.tel = res.data.data[0].tel
      this.province = res.data.data[0].province
      this.city = res.data.data[0].city
      this.county = res.data.data[0].county
      this.addressDetail = res.data.data[0].addressDetail
      // 没有默认地址，flag字段为false
    })
  }
}
</script>
